<template>
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`请假申请`" :autoBack="true" leftIconColor="$uni-text-color"
      :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
  
      <view class="container"
        :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
  
        <!-- 表单盒子 -->
        <view class="form_box area">
          <scroll-view scroll-y :enable-back-to-top="true" class="comprehensive">
            <!-- 表单结构 -->
            <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind" labelWidth="120">
              <uni-forms-item name="type" label="请假类型" required>
                <uni-easyinput @tap="chooseType"  :disabled="true" placeholder="请输入请假类型" v-model="state.formData.type" :inputBorder="false" >
                </uni-easyinput>
              </uni-forms-item>
              <uni-forms-item name="start_time" label="开始时间：" required>
                <view class="dates"  @tap="chooseDate(1)">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"  mode="scaleToFill"/>
                <view :class="state.formData.start_time?'gray':'placeholder'">{{ state.formData.start_time ?state.formData.start_time:'请选择开始日期' }}</view>
              </view>
              </uni-forms-item>
              <uni-forms-item name="end_time" label="结束时间：" required  class="flex">
                <view class="dates"  @tap="chooseDate(2)">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`"  mode="scaleToFill"/>
                <view :class="state.formData.end_time?'gray':'placeholder'">{{ state.formData.end_time ?state.formData.end_time:'请选择结束日期' }}</view>
              </view>
              </uni-forms-item>
              <!-- <uni-forms-item name="duration" label="请假时长：" required  class="flex">
                <view class="flex-vertical">
                  <uni-easyinput type="textarea" v-model="state.formData.duration" placeholder="请选择结束日期"></uni-easyinput>
                </view>
              </uni-forms-item> -->
              <uni-forms-item name="content" label="请假理由" required  class="flex">
                <view class="flex-vertical">
                  <uni-easyinput type="textarea" v-model="state.formData.content" placeholder="请输入请假理由"></uni-easyinput>
                </view>
              </uni-forms-item>
              <view class="cards">
                <view class="title">图片:</view>
                <u-upload :fileList="state.fileList1" @afterRead="imageUpload" @delete="deletePic" name="4" multiple
                :maxCount="4">
              </u-upload>
            </view>
            </uni-forms>
  
          </scroll-view>
        </view>
  
      </view>
  
    </s-layout>
    <!-- 底部提交按钮 -->
    <view>
      <s-button @netWork="submitForm" :text="text"></s-button>
    </view>
    <!---选择类型-->
    <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择状态" @close="showStatus = false"
    @select="statusSelect" :round="18" :closeOnClickAction="true">
  </up-action-sheet>
    <!-- 日期范围 -->
    <up-calendar :monthNum="12" :closeOnClickOverlay="true" :show="DateShow" :mode="mode" @confirm="Confirm" @close="DateClose"></up-calendar>
  </template>
  
  <script setup>
  import sheep from '@/sheep';
  import { ref, reactive, unref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { baseUrl } from "@/sheep/config";
  import { type, end_time, start_time,content } from '@/sheep/validate/form';
  const { safeAreaInsets } = uni.getSystemInfoSync();
  const userStoreValue = uni.getStorageSync('user-store');
const userStoreObject = JSON.parse(userStoreValue)
  const text = ref("提交");
  const state = reactive({
    fileList1: [],
    formData: {
        type: '',
      start_time: '',
      end_time: '',
      duration:'',
      content:'',
      uploadimg:''
  
    },
    rules: {
        type,
        start_time,
        end_time,
        content
    },
  });
  const  editid = ref('')
  onLoad((options)=>{
   
  })
  //获取账号列表
  //日期--------------
const DateShow =  ref(false)
const dateid= ref()
const chooseDate = (e)=>{
  dateid.value = e
  DateShow.value = true
}
const DateClose = ()=>{
 DateShow.value = false
}
const Confirm = (e)=>{
  if( dateid.value == 1){
    state.formData.start_time = `${e}`
  }
  if(dateid.value == 2){
    state.formData.end_time = `${e}`
  }
 DateShow.value = false

}
  //提交
  const relRef = ref();
  const company_type = ref()
  const submitForm = async () => {
    if(userStoreObject.userInfo.group_id == 10) {
      company_type.value = 1
    } else if (userStoreObject.userInfo.group_id == 13) {
      company_type.value = 2
    }
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice','apply_result_notice']);
    // #endif
    const validate = await unref(relRef)
      .validate()
      .catch((error) => {
      });
    if (!validate) return;
    uni.$u.throttle(() => {
    state.formData.uploadimg = postData.value.join(',')
    let parpam={
        type: is_entry.value,
        start_date: state.formData.start_time,
        end_date: state.formData.end_time,
        remark: state.formData.content,
        images:state.formData.uploadimg,
        company_type:company_type.value
    }
    sheep.$api.leave.labor_dispatching_leave_Add(parpam).then((res) => {
      if (res.code == 1) {
          sheep.$helper.toast(res.msg);
          setTimeout(() => {
            sheep.$router.back(true)
          }, 500)
      } else {
          sheep.$helper.toast(res.msg);
      }
    })
  },1000)
  };

  // 删除图片
  const deletePic = (event) => {
    state.fileList1.splice(event.index, 1);
    postData.value.splice(event.index, 1);
  };
  
  // 新增图片
  const imageUpload = async (event) => {
    let lists = [].concat(event.file);
    let fileListLen = state.fileList1.length;
    lists.map((item) => {
      state.fileList1.push({
        ...item,
        status: 'uploading',
        message: '上传中',
      });
    });
    for (let i = 0; i < lists.length; i++) {
      const result = await uploadFilePromise(lists[i].url);
      let item = state.fileList1[fileListLen];
      state.fileList1.splice(fileListLen, 1, {
        ...item,
        status: 'success',
        message: '',
        url:  sheep.$url.cdn(result),
      });
      fileListLen++;
    }
  };
  const postData = ref([])
  async function uploadFilePromise(tempUrl) {
    let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
    postData.value.push(url);
    
    return postData,url;
  
  
  };
  //选择类型
  const chooseType = ()=>{
    showStatus.value = true
  }
  const showStatus = ref(false)
  const showStatusActions = ref([
  { name: '事假', is_entry: 1 },
  { name: '病假', is_entry: 2 },
  { name: '年假', is_entry: 3 },
  { name: '产假', is_entry: 4 },
  { name: '陪产假', is_entry: 5 },
  { name: '婚假', is_entry: 6 },
  { name: '例假', is_entry: 7 },
  { name: '丧假', is_entry: 8 },
  { name: '哺乳假', is_entry: 9 }
])
// 定义方法  状态
const is_entry = ref()
function statusSelect(e) {
    is_entry.value = e.is_entry
  state.formData.type = e.name
  showStatus.value = false
  
}
  </script>
  
  <style scoped lang="scss">
   @import '../compentns/public.scss';
   @import '../compentns/up_sheet.scss';
  //  修改内容
  .edit_button{
      height: 144rpx;
      width: 90%;
      padding: 0 5%;
      background-color: #ffffff;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 98;
      display: flex;
      .del{width: 176rpx;
        height: 90rpx;
  border-radius: 50rpx;
  border: 2rpx solid $uni-color-primary;
  color: $uni-color-primary;
   font-family: PingFangSC;
  color: $uni-color-primary;
  font-weight: $uni-font-weight;
  font-size: 34rpx;}
  .edit{
    margin-left: 20rpx;
    width: 454px;
  height: 90rpx;
  border-radius: 50rpx;
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: $uni-font-weight;
  font-size: 34rpx;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
  }
  
  :deep(.uni-forms) {
    .uni-forms-item.is-direction-left {
      &:nth-last-child(2) {
        .uni-forms-item__label {
          background: $uni-bg-color;
          margin-top: -10rpx;
        }
        flex-direction: column !important;
        height: auto;
      }
  
    }
  }
  // 滚动
  .comprehensive{
          width: calc(100% - 40rpx);
          background-color: rgba(0, 0, 0, 0);
          margin: 0 20rpx;
          height: 73vh;
  }
  //图片
  .cards {
    width: 100%;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    margin-bottom: 120rpx;
    padding-bottom: 20rpx;
      :deep(.u-upload) {
        margin: 30rpx 0;
        width: 100% !important;
        background: #fff !important;
        .u-upload__wrap{
       
          flex-direction: row !important;
          flex-wrap: wrap !important;
          justify-content: flex-start !important;
        }
        
  
  .uploadimg {
    width: 60rpx;
    height: 48rpx;
  }
  }
  
  .uploadimg {
    width: 60rpx;
    height: 48rpx;
  }
  }
  :deep(.is-disabled){
    .uni-easyinput__placeholder-class{
      color: $uni-color-primary !important;
    }   
  
  }
  //日期
.dates{
  text-align: right;
  border: #1241E2 1rpx solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16rpx;
  height: 64rpx;
  margin: 15rpx 0 0 200rpx;
  image{
    width: 28rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }
  .placeholder{
    color: $uni-color-primary;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }
  .gray{
    color: #999;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }
}
  </style>